<!-- 
  Pinia 起步：

    1. 安装
      npm install pinia

    2. 注册 pinia 的实例

    3. 按照需求与模块去定义仓库，使用 defineStore
      
      1. 选项式定义
      2. 组合式定义

    4. 直接在组件中使用即可

 -->

<template>
  <h1>App</h1>

  <p>{{ appStore.theme }}</p>
  <p>{{ appStore.locale }}</p>
  <p>{{ appStore.isDark }}</p>

  <button @click="appStore.toggleTheme">toggleTheme</button>

  <p>{{ userStore.token }}</p>
  <p>{{ userStore.info }}</p>
  <p>{{ userStore.hasLogin }}</p>

  <button @click="userStore.login()">登录</button>
  <button @click="userStore.logout()">登出</button>
</template>

<script setup>
import { useAppStore } from './stores/app'
import { useUserStore } from './stores/user'

const appStore = useAppStore()

const userStore = useUserStore()
</script>
